<template>
  <div class="tabPanel maimai">
    <ul>
      <li :class="{'hit':activeIndex===0}" @click="activeIndex=0">{{ $t('我要买') }}</li>
      <li :class="{'hit':activeIndex===1}" @click="activeIndex=1">{{ $t('我要卖') }}</li>
    </ul>
    <div class="panes">
      <div v-show="activeIndex===0" class="pane">
        <div v-if="buyList.length>0">
          <div v-for="item in buyList" :key="item.id" class="lb">
            <img :src="item.icon" class="touxiang" />
            <div class="xinxi">
              <h2>{{ item.coin_name }}</h2>
              <p>
                <span>{{ $t('限额') }}：</span><img :src="item.icon" />
                <span>{{ `${item.min_num}-${item.max_num}` }}</span>
              </p>
            </div>
            <div class="danjia">{{ $t('单价') }}：<b>{{ item.price_usd }}</b></div>
            <div class="beizhu">
              <p>{{ $t('成交') }}：{{ item.deal_amount }}</p>
              <p>{{ $t('成交率') }}：{{ item.deal_rate }}%</p>
            </div>
            <div class="bottom">
              <div class="fangshi">
                <a v-if="item.wechat_enable!=0" href="javascript:;"><img src="@/assets/images/weixin.png"/></a>
                <a v-if="item.card_enable!=0" href="javascript:;"><img src="@/assets/images/xinyongka.png"/></a>
                <a v-if="item.alipay_enable!=0" href="javascript:;"><img src="@/assets/images/zhifubao.png"/></a>
              </div>
              <div class="btns">
                <a v-if="item.status==1" href="javascript:;" class="buy" @click="banldeDisableMarket(item.id)">{{ $t('撤销') }}</a>
                <a v-if="item.status==2" href="javascript:;" class="buy" @click="banldeEnableMarket(item.id)">{{ $t('启用') }}</a>
                <a v-if="item.status==2" href="javascript:;" class="buy s2" @click="banldeDeleteMarket(item.id)">{{ $t('删除') }}</a>
              </div>
            </div>
          </div>
        </div>
        <div v-else class="fabushuju">
          <img src="~/assets/images/chaxun.png" />
          <p>{{ $t('暂时没有数据') }}</p>
        </div>
      </div>
      <div v-show="activeIndex===1" class="pane">
        <div v-if="sellList.length>0">
          <div v-for="item in sellList" :key="item.id" class="lb">
            <img :src="item.icon" class="touxiang" />
            <div class="xinxi">
              <h2>{{ item.coin_name }}</h2>
              <p>
                <span>{{ $t('限额') }}：</span><img :src="item.icon" />
                <span>{{ `${item.min_num}-${item.max_num}` }}</span>
              </p>
            </div>
            <div class="danjia">单价：<b>{{ item.price_usd }}</b></div>
            <div class="beizhu">
              <p>{{ $t('成交') }}：{{ item.deal_amount }}</p>
              <p>{{ $t('成交率') }}：{{ item.deal_rate }}%</p>
            </div>
            <div class="bottom">
              <div class="fangshi">
                <a v-if="item.wechat_enable!=0" href="javascript:;"><img src="@/assets/images/weixin.png"/></a>
                <a v-if="item.card_enable!=0" href="javascript:;"><img src="@/assets/images/xinyongka.png"/></a>
                <a v-if="item.alipay_enable!=0" href="javascript:;"><img src="@/assets/images/zhifubao.png"/></a>
              </div>
              <div class="btns">
                <a v-if="item.status==1" href="javascript:;" class="buy" @click="banldeDisableMarket(item.id)">{{ $t('撤销') }}</a>
                <a v-if="item.status==2" href="javascript:;" class="buy" @click="banldeEnableMarket(item.id)">{{ $t('启用') }}</a>
                <a v-if="item.status==2" href="javascript:;" class="buy s2" @click="banldeDeleteMarket(item.id)">{{ $t('删除') }}</a>
              </div>
            </div>
          </div>
        </div>
        <div v-else class="fabushuju">
          <img src="~/assets/images/chaxun.png" />
          <p>{{ $t('暂时没有数据') }}</p>
        </div>
      </div>
    </div>
  </div>
</template>
<script>
import { mapActions } from 'vuex'
export default {
  data () {
    return {
      activeIndex: 0,
      buyList: [],
      sellList: []
    }
  },
  beforeMount () {
    this.getList()
  },
  methods: {
    ...mapActions({
      myMarket: 'otc/myMarket',
      disableMarket: 'otc/disableMarket',
      enableMarket: 'otc/enableMarket',
      deleteMarket: 'otc/deleteMarket'
    }),
    getList () {
      this.buyList = []
      this.sellList = []
      this.myMarket()
        .then((data) => {
          data.data.forEach((element) => {
            if (element.side === '2') {
              this.buyList.push(element)
            } else if (element.side === '1') {
              this.sellList.push(element)
            }
          })
        })
        .catch(() => {})
    },
    banldeDisableMarket (id) {
      if (this.loading) { return false }
      const payload = {
        market_id: id
      }
      this.loading = true
      this.disableMarket(payload)
        .then((data) => {
          this.getList()
        })
        .finally(() => {
          this.loading = false
        })
    },
    banldeEnableMarket (id) {
      if (this.loading) { return false }
      const payload = {
        market_id: id
      }
      this.loading = true
      this.enableMarket(payload)
        .then((data) => {
          this.getList()
        })
        .finally(() => {
          this.loading = false
        })
    },
    banldeDeleteMarket (id) {
      if (this.loading) { return false }
      const payload = {
        market_id: id
      }
      this.loading = true
      this.deleteMarket(payload)
        .then((data) => {
          this.getList()
        })
        .finally(() => {
          this.loading = false
        })
    }
  }
}
</script>
<style scoped>
.maimai ul {
  height: 30px;
  width: 96%;
  margin: 0 2%;
  border: 1px solid #03ac8f;
  border-radius: 5px;
  background: #f0f3fa;
}
.maimai ul li {
  float: left;
  height: 30px;
  line-height: 30px;
  width: 50%;
  text-align: center;
  cursor: pointer;
  color: #03ac8f;
}
.maimai .hit {
  cursor: pointer;
  color: #fff;
  background: #03ac8f;
}
.maimai .pane {
  min-height: 100px;
  width: 96%;
  margin: 0 2%;
}
.fabushuju {
  width: 100%;
  min-height: 300px;
  text-align: center;
}
.fabushuju img {
  width: 64px;
  margin: 100px 0 0 0;
}
.fabushuju p {
  color: #999;
  line-height: 30px;
}
.maimai .pane .lb .bottom .buy.s2 {
  background-color: rgb(255, 91, 91);
  margin-right: 5px;
}
</style>
